<template>
    <a-card title="部门管理" :bordered="false">
        <!-- Card Header -->
       <template slot="extra">
           <a-button icon="plus" type="danger" @click="openEdit()">新建</a-button>
       </template>
       <a-table  v-if="dataSource.length > 0"

               :columns="columns"
                :rowKey="record => record.id"
                :dataSource="dataSource"
                :pagination="false"
                 :loading="loading"
                :defaultExpandAllRows="true"
                >
            <!-- 状态插槽 -->
            <template slot="status" slot-scope="text, record">
                <a-tag :color=" text==='T'?'blue':''  ">{{ $exMod.findDict(deptStatusOPT, text) }}</a-tag>
            </template>
           <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a  @click="openEdit({parentCode:record.code})" > 新建下级</a>
                <a-divider type="vertical"/>
               <a @click="openEdit(record)">编辑</a>
                <a-divider type="vertical"/>


                <a-popconfirm title="确定要删除这个部门吗?" @confirm="() => deldept(record)" v-if="record.code !== 'root' ">
                    <span><a href="javascript:void(0)">删除</a></span>
                </a-popconfirm>
            </template>
        </a-table>
       <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
    </a-card>
</template>
<script>
    import {dictLoad} from '../../../util/internal.api';
    import {deptTable} from '../public/colums';
    import {deptTree, deptDel, deptUpdate} from '../public/http';
    export default {
        components: {
            EditBox: resolve => {
                require(['./edit.vue'], resolve);
            }
        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
               loading: false, //表格loading
                columns: deptTable, //表头管理
                searchForm: {
                    code: '',
                    name: '',
                    remark: '',
                    status: ''
                },
                deptStatusOPT: []
            };
        },
        methods: {
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
               deptTree().then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                    }
                });
            },
           //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.getTableList();
            },
            //4.0删除部门
            deldept(record) {
                this.loading = true;
                deptDel(record.id).then(res => {
                    if (res.code === 0) {
                        //成功提醒
                        this.$notification.success({
                            message: '操作成功',
                            description: res.message
                        });
                        this.getTableList();
                    } else {
                        this.$notification.error({
                            message: '操作失败',
                            description: res.message
                        });
                    }
                    this.loading = false;
                });
            },
           //数据初始化
            async init() {
                await dictLoad('deptStatus').then(res => (this.deptStatusOPT = res));
                this.getTableList();
            }
       },
        created() {
            this.init();
        }
    };
</script>
